<template>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" :title="isAdd === 'add'? '新增公司' : '编辑公司'" append-to-body width="520px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item v-if="isAdd !== 'add'"  label="公司编号" prop="orgData">
                <el-input v-model="form.orgData" placeholder="请输入公司编号" readonly class="w100p"/>
            </el-form-item>
            <el-form-item v-else label="公司编号" prop="orgData">
                <el-select
                    v-model="form.orgData"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入公司编号"
                    :remote-method="getPassPortOrgOption"
                    :loading="loading"
                    @change="ChangeorgCode"
                    class="w100p"
                >
                    <el-option
                    v-for="item in PassPortOrgOptions"
                    :key="item.departmentId"
                    :label="item.departmentId"
                    :value="item"
                    >
                        <span>{{ item.departmentName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称" prop="fullName">
                <el-input v-model="form.fullName" placeholder="请输入公司名称" readonly class="w100p"/>
            </el-form-item>
            <el-form-item label="简称" prop="shortName">
                <el-input v-model="form.shortName" placeholder="请输入简称"  class="w100p"/>
            </el-form-item>
            <el-form-item label="税号" prop="taxNo">
                <el-input v-model="form.taxNo"  placeholder="请输入税号"  class="w100p"/>
            </el-form-item>
            <el-form-item label="电话" prop="telPhone">
                <el-input v-model="form.telPhone" placeholder="请输入电话"  class="w100p"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址"  class="w100p"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="submit()">确定</el-button>
                 <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  setup>
import { ORGSTATUSOPTION } from './config'
import api from '@/api/index'
import { onMounted } from 'vue'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    isAdd: {
        type: String,
        default: 'add'
    },
    formData: {
        type: Object,
        default: ()=> {}
    }
})
watch(() => props.dialogVisible,(newVal) => {
    if(newVal === true){
        if(props.isAdd === 'add'){
            form.value = {}
        }else{
            form.value = {...props.formData}
            form.value.orgData = props.formData.orgCode
        }
    }
})

const rules = reactive({
    orgData: [
        {
            required: true,
            message: '请输入公司编号',
            trigger: 'blur'
        }
    ],
    fullName: [
        {
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
        }
    ]
    // shortName: [
    //     {
    //         required: true,
    //         message: '请输入简称',
    //         trigger: 'blur'
    //     }
    // ],
    // taxNo: [
    //     {
    //         required: true,
    //         message: '请输入税号',
    //         trigger: 'blur'
    //     }
    // ],
    // telPhone: [
    //     {
    //         required: true,
    //         message: '请输入电话',
    //         trigger: 'blur'
    //     }
    // ],
    // address: [
    //     {
    //         required: true,
    //         message: '请输入地址',
    //         trigger: 'blur'
    //     }
    // ],
})
const props1 = {
    checkStrictly: true,
    value: 'id',
    label: 'fullName'
}
const PassPortOrgOptions = ref([])
const options = ref([])
const emit = defineEmits(['on-submit', 'handleClose'])
const formRef = ref(null)
const form = ref({
    orgStatus: 1
})
const fullName = ref('公司管理')
const loading = ref(false)

onMounted(()=>{
    
})

const handleClose = () => {
    formRef.value.resetFields()
    emit('handleClose',false)
}
const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            if(props.isAdd === 'add'){
                form.value.orgStatus = 1
            }
            emit('on-submit', {...form.value})
        } else {
            return false
        }
    })

}
const getPassPortOrgOption = (query)=>{
    if(query){
        api.dataMaintenance.getPassPortOrg(query).then((res)=>{
            if(res) PassPortOrgOptions.value = [res] || []
        })
    }else{
        PassPortOrgOptions.value = []
    }
}
const ChangeorgCode = (val)=>{
    form.value.orgCode = val.departmentId
    form.value.fullName = val.departmentName + '['+val.departmentId+']'
}
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: right;
}
</style>
